import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';
import 'package:yp/pages/mall_app/opinion_feedback_details/gallery.dart';

import 'logic.dart';
import 'state.dart';

class OpinionFeedbackDetailsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _OpinionFeedbackDetailsPage();
  }
}

class _OpinionFeedbackDetailsPage extends State<OpinionFeedbackDetailsPage> {
  final OpinionFeedbackDetailsLogic logic =
      Get.put(OpinionFeedbackDetailsLogic());
  final OpinionFeedbackDetailsState state =
      Get.find<OpinionFeedbackDetailsLogic>().state;
  var args = Get.arguments as Map;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        title: Text(
          '意见反馈',
          style: TextStyle(
            color: Color(0xff030303),
            fontSize: 18,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff666666), //修改颜色
        ),
      ),
      body: GetBuilder<OpinionFeedbackDetailsLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xffF3F4F6),
            child: ListView(
              children: [
                _opinionContentWidget(),
                _customerServiceReply(),
              ],
            ),
          );
        },
      ),
    );
  }

  // 反馈内容
  Widget _opinionContentWidget() {
    var urlString = args['feedback_image_urls'] as String ?? '';
    var urls = urlString.isEmpty ? [] : urlString.split(',');
    return Container(
      padding: EdgeInsets.only(
        left: setWidth(40),
        top: setWidth(34),
        right: setWidth(40),
        bottom: setWidth(30),
      ),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: setWidth(72),
                padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
                alignment: Alignment.center,
                constraints: BoxConstraints(
                  minWidth: setWidth(180),
                ),
                decoration: BoxDecoration(
                  color: Color(0x1ADB2132),
                  borderRadius: BorderRadius.circular(setWidth(36)),
                ),
                child: Text(
                  args['group_name'],
                  style: TextStyle(
                    color: Color(0xffDB2132),
                    fontSize: 12,
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(
              top: setWidth(30),
              bottom: urls.isEmpty ? 0 : setWidth(24),
            ),
            child: Text(
              args['feedback_content'],
              style: TextStyle(
                color: Color(0xff222222),
                fontSize: 14,
              ),
            ),
          ),
          urls.isEmpty
              ? SizedBox()
              : Wrap(
                  spacing: setWidth(20),
                  runSpacing: setWidth(26),
                  children: urls
                      .asMap()
                      .map(
                        (index, e) => MapEntry(
                            index,
                            InkWell(
                                onTap: () {
                                  Get.to(PhotoGalleryPage(
                                    urls,
                                    currentIndex: index,
                                  ));
                                },
                                child: Image.network(
                                  e,
                                  width: setWidth(128),
                                  height: setWidth(128),
                                  fit: BoxFit.cover,
                                ))),
                      )
                      .values
                      .toList()),
        ],
      ),
    );
  }

  // 客服回复
  Widget _customerServiceReply() {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: setWidth(78),
            padding: EdgeInsets.only(
              left: setWidth(20),
              top: setWidth(20),
            ),
            child: Text(
              '客服回复',
              style: TextStyle(
                color: Color(0xff222222),
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Container(
            color: Colors.white,
            height: setWidth(388),
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.only(
              left: setWidth(20),
              top: setWidth(24),
              right: setWidth(20),
              bottom: setWidth(24),
            ),
            child: Text(
              args['reply_content'] ?? '还没来得及给您回复，请耐心等待！',
              style: TextStyle(
                color: args['reply_content'] == null
                    ? Color(0xff999999)
                    : Color(0xff222222),
                fontSize: setWidth(28),
              ),
            ),
          ),
          // SizedBox(
          //   height: setWidth(170),
          // ),
          // Padding(
          //   padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
          //   child: GestureDetector(
          //     onTap: () {
          //       print('=================== ！继续反馈点击事件！ ===================');
          //     },
          //     behavior: HitTestBehavior.opaque,
          //     child: Container(
          //       height: setWidth(90),
          //       decoration: BoxDecoration(
          //         color: Colors.white,
          //         borderRadius: BorderRadius.circular(setWidth(45)),
          //         border: Border.all(
          //           color: Color(0xffcccccc),
          //           width: setWidth(1),
          //         ),
          //       ),
          //       alignment: Alignment.center,
          //       child: Text(
          //         '继续反馈',
          //         style: TextStyle(
          //           color: Color(0xff666666),
          //           fontSize: 18,
          //         ),
          //       ),
          //     ),
          //   ),
          // ),
        ],
      ),
    );
  }
}
